<!-- 详情页 -->
<template>
  <div class="detail-wrap" ref="detailWrap">
    <!-- 返回上一页 和 分享组件 -->
    <toTip />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="darkred">
      <van-swipe-item v-for="item in gallery" :key="item.id">
        <img :src="item.img_url" width="100%" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 30天无忧退货组件 -->
    <Tips />
    <!-- 商品信息 -->
    <div class="info">
      <h3>{{ info.name }}</h3>
      <p>{{ info.goods_brief }}</p>
      <div>{{ info.retail_price | RMBformat }}</div>
    </div>
    <!-- 商品参数 -->
    <div class="attribute">
      <h4>商品参数</h4>
      <ul>
        <li v-for="(item, index) in attribute" :key="index">
          <span>{{ item.name }}</span>
          <section class="van-ellipsis">{{ item.value }}</section>
        </li>
      </ul>
    </div>
    <!-- 产品详情 -->
    <div class="title">
      <span>产品详情</span>
    </div>
    <!-- 商品描述信息 -->
    <div class="goods_desc" v-html="info.goods_desc"></div>
    <!-- 常见问题 -->
    <div class="title">
      <span>常见问题</span>
    </div>
    <ul class="issue">
      <li v-for="item in issue" :key="item.id">
        <h3>{{ item.question }}</h3>
        <p>{{ item.answer }}</p>
      </li>
    </ul>
    <!--相关产品  -->
    <div class="title">
      <span>相关产品</span>
    </div>
    <!-- 相关产品排列 -->
    <Products :goodsList="goodsList" />
    <!--点击加入购物车展示商品规格面板-->
    <van-sku
      v-model="isSkuShow"
      ref="sku"
      :sku="sku"
      :goods="goods"
      :hide-stock="sku.hide_stock"
      @add-cart="onAddCartClicked"
    />
    <!-- 返回顶部 -->
    <van-icon
      name="back-top"
      v-if="gotop"
      class="to-up"
      size="40"
      color="#fff"
      @click="goTop"
    />
    <!-- 底部收藏-购物车-加入购物车-立即购买tabbar -->
    <van-goods-action>
      <van-goods-action-icon
        :icon="isCollected ? 'star' : 'star-o'"
        :text="isCollected ? '已收藏' : '未收藏'"
        :color="isCollected ? 'darkred' : '#666'"
        @click="isCollected = !isCollected"
      />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        @click="$router.push('/cart')"
        :badge="badge"
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addToCart"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
// 引入请求接口
import {
  GoodsDetailApi, // 产品详情接口
  GetGoodsRelatedData, // 相关产品接口
  GetCartNum, // 购物车商品数量
  AddToCart, // 加入购物车
} from "@/https/http";
//Tips 30 天无忧退货。。。
import Tips from "@/components/Tips.vue";
//引入Products组件
import Products from "@/components/Products.vue";
// 引入返回 分享 组件
import toTip from "@/components/toTip.vue";
export default {
  components: { Tips, Products, toTip },
  data() {
    return {
      gotop: false, //是否显示回到顶部
      badge: 0, // 购物车数量
      gallery: [], // 轮播图数组
      info: {}, // 商品信息
      attribute: [], // 商品参数
      issue: [], // 常见问题
      goodsList: [], // 相关产品列表
      productList: [], // 当前产品信息
      isCollected: false, // 是否收藏
      isSkuShow: false, // 是否展示商品规格面板
      sku: {
        tree: [], // 商品规格类目数组目前没有类目默认空
        hide_stock: false, // 是否隐藏剩余库存
        price: "", //价格
        stock_num: 0, //当前 sku 组合对应的库存
      },
      goods: {
        picture: "", // 默认商品 sku 缩略图
      },
    };
  },
  mounted() {
    let that = this;
    let detailWrap = document.querySelector(".detail-wrap");
    detailWrap.onscroll = function () {
      if (detailWrap.scrollTop >= 1000) {
        that.gotop = true;
      } else {
        that.gotop = false;
      }
    };
  },
  created() {
    console.log(this.$route.query.id); // 路由参数
    // 产品详情接口
    GoodsDetailApi({
      id: this.$route.query.id,
    }).then((res) => {
      console.log(88, res);
      if (res.errno == 0) {
        this.gallery = res.data.gallery; // 轮播图数组
        this.info = res.data.info; //商品信息
        this.attribute = res.data.attribute; // 商品参数
        this.issue = res.data.issue; //常见问题
        this.goods.picture = res.data.info.list_pic_url; //默认商品 sku 缩略图
        this.sku.price = res.data.info.retail_price.toFixed(2); // 当前商品的价格
        this.sku.stock_num = res.data.info.goods_number; //当前 sku 组合对应的库存
        this.productList = res.data.productList; // 当前产品信息
        console.log(66, this.sku);
      }
    });
    //相关产品列表接口请求
    GetGoodsRelatedData({
      id: this.$route.query.id,
    }).then((res) => {
      // console.log(JSON.stringify(res))
      console.log(33, res);
      this.goodsList = res.data.goodsList;
    });
    //获取购物车数量
    GetCartNum().then((res) => {
      if (res.errno == 0) {
        // 购物车商品数量
        this.badge = res.data.cartTotal.goodsCount;
      }
    });
  },
  methods: {
    goTop() {
      //点击返回顶部事件
      let detailWrap = document.querySelector(".detail-wrap");
      detailWrap.scrollTop = 0;
    },
    onAddCartClicked() {
      // 执行加入购物车调用接口

      AddToCart({
        goodsId: this.$route.query.id, // 地址栏id
        productId: this.productList[0].id, //产品id，在刷新页面时的数据对象下获取productList数组
        number: this.$refs.sku.getSkuData().selectedNum, // 选中的商品数量
      }).then((res) => {
        console.log("加入购物车", res);
        // 更新购物车数量
        this.badge = res.data.cartTotal.goodsCount;
        // 显示添加成功
        this.$toast.success("添加成功");
      });
      // 隐藏 商品规格面板
      this.isSkuShow = false;
    },
    addToCart() {
      // 显示商品规格面板
      this.isSkuShow = true;
    },
  },
};
</script>
 <style lang = "less" scoped>
.detail-wrap {
  width: 100%;
  height: 100%;
  overflow: scroll;
  .to-up {
    position: fixed;
    bottom: 0.5rem;
    right: 0.1rem;
    z-index: 999;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
  }
  .issue {
    padding: 0 4%;
    background: #fff;
    li {
      h3 {
        height: 0.5rem;
        line-height: 0.5rem;
        padding-left: 0.2rem;
        position: relative;
        font-weight: normal;
        &::before {
          content: "";
          width: 4px;
          height: 4px;
          background: darkred;
          display: inline-block;
          position: absolute;
          left: 0;
          top: 50%;
          margin-top: -2px;
        }
      }
      p {
        font-size: 0.12rem;
        line-height: 0.2rem;
        padding-left: 0.2rem;
      }
    }
  }
  .title {
    width: 100%;
    background: #fff;
    height: 0.5rem;
    position: relative;
    &::before {
      content: "";
      width: 50%;
      height: 2px;
      background: #ccc;
      position: absolute;
      top: 50%;
      margin-top: -1px;
      left: 50%;
      margin-left: -25%;
    }
    span {
      width: 30%;
      position: relative;
      background: #fff;
      display: block;
      text-align: center;
      margin: 0 auto;
      height: 0.5rem;
      line-height: 0.5rem;
    }
  }
  /* 如果样式无法替换，可以试试/deep/ 深度样式写法 */
  /deep/.goods_desc {
    img {
      max-width: 100%;
      display: block;
    }
  }
  .info {
    background: #fff;
    text-align: center;
    padding: 0.2rem 0;
    h3 {
      font-weight: normal;
      font-size: 0.2rem;
      line-height: 0.5rem;
    }
    p {
      color: #999;
      font-size: 0.14rem;
      line-height: 0.3rem;
    }
    div {
      color: darkred;
      font-size: 0.14rem;
      line-height: 0.3rem;
    }
  }
  .attribute {
    margin-top: 0.2rem;
    background: #fff;
    padding: 0.2rem 4%;
    h4 {
      font-weight: normal;
      font-size: 0.16rem;
      margin-bottom: 0.2rem;
    }
    ul {
      li {
        background: #efefef;
        line-height: 0.4rem;
        height: 0.4rem;
        margin-bottom: 0.1rem;
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        span {
          width: 30%;
          text-align: right;
        }
        section {
          flex: 1;
          padding-left: 0.2rem;
        }
      }
    }
  }
}
</style>